<template>
  <div class="user-manage clearfix">
    <div class="user-manage__left">
      <img
        :src="userStore.user.avatar"
        alt=""
        @click="openModal(userStore.user.avatar)"
      />
    </div>
    <div class="user-manage__right">
      <p class="user-manage__name">{{ userStore.user.nickName }}</p>
      <p class="user-manage__account">账号：{{ userStore.user.userId }}</p>
    </div>
  </div>
  <div class="signout">
    <el-button type="primary" :loading="isLoading" @click="signout" :disabled="isLoading"
      ><template #loading><Loading /></template>退出登录</el-button
    >
  </div>
  <Modal v-model="showModal">
    <img class="img-browser" :src="imgSrc" alt="" />
  </Modal>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useUserPinia } from "../../pinia/user";
import Loading from "../ui-components/loading.vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const userStore = useUserPinia();
const router = useRouter();

/**
 * 是否正在退出登录
 */
const isLoading = ref<boolean>(false);

// 退出登录
const signout = (): void => {
  isLoading.value = true;
  userStore
    .signout()
    .then((code: number) => {
      isLoading.value = false;
      if (code === 1) {
        ElMessage.success("退出成功");
        document.body.style.cssText = "";
        router.replace({ name: "login" });
      } else if (code === -1) {
        ElMessage.error("token已过期，请重新登录");
        router.replace({ name: "login" });
      } else ElMessage.error("退出失败");
    })
    .catch(() => {
      isLoading.value = false;
      ElMessage.error("退出失败");
    });
};

/**
 * 当前用户查看的图片的url
 */
const imgSrc = ref<string>("");
/**
 * 是否显示模态框
 */
const showModal = ref<boolean>(false);
// 浏览图片时打开模态框
const openModal: (url: string) => void = (url: string): void => {
  imgSrc.value = url;
  showModal.value = true;
};
</script>

<style lang="scss" scoped>
.user-manage {
  @include card(300px, 100px, 3px);
  margin: 0 auto;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

  &__left {
    @include setWidHei(60px, 60px);
    float: left;

    img {
      @include setWidHei(100%, 100%);
      object-fit: cover;
      cursor: pointer;
    }
  }

  &__right {
    float: left;
    margin-left: 15px;
  }

  &__name {
    margin: 5px 0;
    font: {
      weight: 650;
      size: 17px;
    }
  }

  &__account {
    margin: 10px 0;
    font-size: 13px;
    color: $dimFontCor;
  }
}

.signout {
  margin: 30px 0;
  text-align: center;
}
</style>
